<template>
  <input
    class="input input-bordered"
    :type="type"
    :value="modelValue"
    @input="onInput"
  />
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";

type InputType =
  | "text"
  | "number"
  | "password"
  | "date"
  | "datetime-local"
  | "email"
  | "url";

interface Props {
  type?: InputType;
  modelValue?: string;
  debounceMs?: number;
}

const props = withDefaults(defineProps<Props>(), {
  type: "text",
  debounceMs: 300,
});

const emit = defineEmits<{
  "update:modelValue": [string];
}>();

const onInput = useDebounceFn((e: Event) => {
  const value = (e.target as HTMLInputElement).value;
  emit("update:modelValue", value);
}, props.debounceMs);
</script>
